<template>
    <div id="app">
        <div id="Home" class="y-flex">
            <s-header :name="'视频'"></s-header>
            <div class="prompt">宠物视频综合推荐</div>
        <scroll-view
            v-model="isLoading"
            :is-pulling="isPulling"
            :is-body-scroll="true"
        >
            <div class="goods-wrapper y-center__between">
                <!-- <video-card v-for="item in videoList" :key="item.id" :videoInfo="item" /> -->
                <videocard v-for="item in videoList" :key="item.id" :videoInfo="item" @click="goToDetail(item)"/>
            </div>
        </scroll-view>
        </div>
    </div>
</template>

<script>
import sHeader from '@/components/SimpleHeader'
import videocard from '@/components/VideoCard'
export default {
  components: {
    sHeader,
    videocard
  },
  data() {
    return {
        src: "http://175.178.214.244:8888/group1/M00/00/00/CgAIEGKKWL-EcXA9AAAAAIjfiKM905.mp4",
        videoList:[
            {id:1,title:'视频1',img:'http://175.178.214.244:8888/group1/M00/00/00/CgAIEGLEHz2AMtEKABb0WnLue8M777.mp4'},
            {id:2,title:'视频2',img:'http://175.178.214.244:8888/group1/M00/00/00/CgAIEGLEH2CAKPKVABx7StOTf8Y003.mp4'},
            {id:3,title:'视频3',img:'http://175.178.214.244:8888/group1/M00/00/00/CgAIEGKKWL-EcXA9AAAAAIjfiKM905.mp4'},
            {id:4,title:'视频4',img:'http://175.178.214.244:8888/group1/M00/00/00/CgAIEGKKWL-EcXA9AAAAAIjfiKM905.mp4'},
            {id:5,title:'视频5',img:'http://175.178.214.244:8888/group1/M00/00/00/CgAIEGKKWL-EcXA9AAAAAIjfiKM905.mp4'},
            {id:6,title:'视频6',img:'http://175.178.214.244:8888/group1/M00/00/00/CgAIEGKKWL-EcXA9AAAAAIjfiKM905.mp4'}
        ]
      }
  },
  created() {
  },
  async mounted() {
    const { data } = await getVideo()
    this.videoList = data.videoList
    Toast.clear()
  },
  methods: {
     goToDetail(item) {
      this.$router.push({ path: `product/${item.goodsId}` })
    }
  }

}
</script>
<style>
.home-tab {
        padding-bottom: 20px;
    }

     .van-tab {
            font-size: 16px;
            font-weight: 400;
            color: #424242;
        }

        .van-tabs__line {
            width: 38px;
        }

        .van-tab--active {
            font-weight: 600;
            color: #333;
        }

    .prompt {
        font-size: 20px;
        color: #333;
    }
</style>